<mat-sidenav-container class="sidenav-container">
  <mat-sidenav
    class="sidenav"
    #drawer
    fixedInViewport
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="(isHandset$ | async) === false">
    <mat-toolbar class="custom-toolbar shrink-0">
      <img
        width="70%"
        alt="Logo"
        [attr.src]="config.brandLogoSrc"
        [style]="config.brandLogoStyle" />
    </mat-toolbar>
    <div class="flex flex-col gap-8">
      <div *ngFor="let navItemGroup of navItemGroups">
        <h3
          *ngIf="navItemGroup.title"
          class="!ml-5 !my-0 !p-0 !font-medium !text-gray-500 !uppercase !tracking-wide !text-xs">
          {{ navItemGroup.title }}
        </h3>
        <mat-nav-list>
          <a
            *ngFor="let navItem of navItemGroup.items"
            [routerLink]="[navItem.path]">
            <mat-list-item [routerLinkActive]="['is-active']">
              <mat-icon mat-list-icon>{{ navItem.icon }}</mat-icon>
              <span matLine>{{ navItem.title | translate }}</span>
            </mat-list-item>
          </a>
        </mat-nav-list>
      </div>
    </div>
    <div
      *ngIf="'sovity-zammad-integration' | isActiveFeature"
      id="contact-form"
      class="align-to-bottom shrink-0 mt-auto">
      <strong>Do you have feedback or need help?</strong>
      <p><em>Select &nbsp;<kbd>SAML</kbd>&nbsp; login on following page</em></p>
      <a
        href="https://sovity.zammad.com/#customer_ticket_new"
        target="_blank"
        mat-raised-button
        color="primary">
        CREATE TICKET
      </a>
      <a
        href="https://sovity.zammad.com/#knowledge_base/1/locale/en-us"
        target="_blank"
        mat-raised-button
        color="primary">
        TUTORIAL & FAQ
      </a>
    </div>
    <div
      *ngIf="('mds-marketing' | isActiveFeature) && config.showEeBasicMarketing"
      class="flex flex-row items-center mx-auto pr-4 pb-4">
      <i>powered by</i>
      <img
        class="h-6 ml-[0.42rem] mt-[0.17rem]"
        src="/assets/images/sovity_logo.svg"
        alt="sovity logo" />
    </div>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar class="flex items-center" color="primary">
      <button
        *ngIf="isHandset$ | async"
        type="button"
        mat-icon-button
        aria-label="Toggle sidenav"
        (click)="drawer.toggle()">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span class="flex-grow">{{
        titleService.getTitle() || '' | translate
      }}</span>
    </mat-toolbar>
    <main class="container">
      <router-outlet></router-outlet>
    </main>
  </mat-sidenav-content>
</mat-sidenav-container>
